@include('Home.head')
<link rel="stylesheet" href="{{ URL::asset('css/home/layui.css') }}">

<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a  onclick="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">@{{ title }}</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="/home/member/index" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
    <div class="my-nav-bar">
    	<ol class="am-breadcrumb">
          <li><a href="/home/stores/index">门店中心</a></li>
          <li><a href="">订单</a></li>
        </ol>
    </div>
    <div class="am-cf cart-panel" id="">
        {{--<ul class="flow-default" id="LAY_demo1"></ul>--}}

        <div id="" class="withdrawals-panel" v-for="val in order">
            <p class="groupby-t-p">订单号：@{{ val.ordersn }}</p>
            <hr  class="am-divider am-divider-default am-cf"/>
            <div class="groupby-img-panle">
                <a href="#" v-show="val.ordertype ==1"><img src="/img/home/user/zshop.jpg" class="am-img-responsive" /></a>
                <a href="#" v-show="val.ordertype ==2"><img src="/img/home/user/cshop.jpg" class="am-img-responsive" /></a>
                <a href="#" v-show="val.ordertype ==3"><img src="/img/home/user/img3.jpg" class="am-img-responsive" /></a>
            </div>
            <div class="groupby-info-panle">
                {{--<h3><a href="#">@{{ val.ordername }}</a></h3>--}}
                <p>金额：<span class="red2 bold">@{{ val.price }}</span> 元&nbsp; &nbsp;
                    <span v-show="val.is_self == 0">运费：<span class="red2 bold">@{{ val.freight }}</span>元 </span>
                    <span v-show="val.is_self == 1">运费：<span class="red2 bold">自提</span> </span>
                    {{--积分：<span class="am-text-success">20</span>--}}</p>
                <p>姓名：@{{ val.user_name }} &nbsp; &nbsp; &nbsp;&nbsp;   </p>
                <p>
                    状态：
                    <span class="red2" v-show="val.status == -1">订单取消</span>
                    <span class="red2" v-show="val.status == 0">待付款</span>
                    <span class="am-text-success" v-show="val.status == 1">已付款</span>
                    <span class="am-text-success" v-show="val.status == 2">已发货</span>
                    <span v-show="val.status == 3">订单完成</span>
                </p>
                <p>下单时间：@{{ val.createtime }}</p>
                <p v-if="val.couriertime != ''">发货时间：@{{ val.couriertime }}</p>
                <p>
                    <a v-show="val.status == 1" class="am-btn am-btn-secondary am-btn-xs am-btn-success am-radius" v-on:click="deliver(val.id)">确定发货</a>
                    <a v-on:click="affirms(val.id)" v-show="val.status == 2" class="am-btn am-btn-warning am-btn-xs am-radius">确定收货</a>
                    <a href="#" v-show="val.status == 3" class="am-btn am-btn-primary am-btn-xs am-radius">订单完成</a>
                    <a v-on:click="orderComm(val.id)" class="am-btn am-btn-default am-btn-xs am-radius">订单详情</a>
                </p>
            </div>
        </div>
        <li class="layui-flow-more" v-if="loading">加载中</li>
        <li class="layui-flow-more" v-if="loading==false">没有更多了</li>
    </div>
    @include('Home.foot')
</div>
</body>
<script src="{{ URL::asset('js/admin/layui/layui.js') }}"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '我的订单',
            order:{

            },
            page: '',//总页数
            nowPage: 2,//本页
            loading: false,//异步加载时的限制
            bottomHight: 50,//滚动条到某个位置才触发时间

        },
        methods: {
            handleScroll: function () {
                var rico = this
                if (getScrollBottomHeight() <= app.bottomHight && app.nowPage < app.page && app.loading == false) {
                    app.loading = true;
                    $.get("/home/member/myorder", {'_token': '{{csrf_token()}}',class:'select_stores_order',page:app.nowPage+1}, function (res) {
                        for (var i = 0; i < res.data.data.length; i++) {
                            // console.log(res.data.data[i])
                            res.data.data[i].createtime = rico.formatDateTime(res.data.data[i].createtime)
                            if(res.data.data[i].couriertime){
                                res.data.data[i].couriertime = rico.formatDateTime(res.data.data[i].couriertime)
                            } else {
                                res.data.data[i].couriertime = ''
                            }
                            app.order.push(res.data.data[i]);
                        }
                        app.nowPage++;
                        app.loading = false;
                    });
                }
            },

            //初始化 系统管理员列表
            initialize: function () {
                var rico = this
                $.post("/home/member/myorder", {'_token': '{{csrf_token()}}',class:'select_stores_order'}, function (res) {
                    if (res.code) {
                        // app.pages = res.data
                        app.order = res.data.data;
                        app.page = res.data.last_page;
                        app.nowPage = res.data.current_page;
                        for(var i=0;app.order.length>i;i++){
                            app.order[i].createtime = rico.formatDateTime(app.order[i].createtime)
                            if(res.data.data[i].couriertime){
                                res.data.data[i].couriertime = rico.formatDateTime(res.data.data[i].couriertime)
                            } else {
                                res.data.data[i].couriertime = ''
                            }
                        }
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            formatDateTime:function (timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
            },
            pag:function () {
                $.post("/home/member/myorder", {'_token': '{{csrf_token()}}',class:'select_stores_order'}, function (res) {
                    if (res.code) {

                        app.order = res.data.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            //订单详情
            orderComm:function (id) {
                window.location.href="/home/stores/ordercomment?id="+id;
            },
            //确认发货
            deliver:function (id) {
                window.location.href="/home/stores/deliver?id="+id;
            },
            //确认收货
            affirms:function(id){
                var that = this;
                $.post("/home/member/myorder", {'_token': '{{csrf_token()}}',class:'affirms',id:id}, function (res) {
                    if (res.code) {
                        layer.msg(res.data);
                        that.initialize();
                    } else {
                        layer.msg(res.data);
                    }
                });
            }

        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })

    //添加滚动事件
    window.onload = function () {
        window.addEventListener('scroll', app.handleScroll)
    }
    //滚动条到底部的距离
    function getScrollBottomHeight() {
        return getPageHeight() - getScrollTop() - getWindowHeight();

    }
    //页面高度
    function getPageHeight() {
        return document.querySelector("html").scrollHeight
    }
    //滚动条顶 高度
    function getScrollTop() {
        var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
</script>
</html>
